<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>M3U8 Video Detector</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="header">
    <h1>M3U8 Video Detector</h1>
    <div class="header-actions">
      <button id="help-btn" class="header-btn" title="帮助">
        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20" fill="#ffffff">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
        </svg>
      </button>
      <button id="settings-btn" class="header-btn" title="设置">
        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20" fill="#ffffff">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
        </svg>
      </button>
    </div>
  </div>
  
  <div class="content">
    <!-- 无链接提示 -->
    <div id="no-links-message" class="no-links-message">
      <svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 0 24 24" width="48">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
      </svg>
      <h3>未检测到M3U8链接</h3>
      <p>浏览网页时，扩展程序会自动检测M3U8视频链接</p>
      <p>检测到的链接将显示在这里</p>
    </div>
    
    <!-- 链接列表 -->
    <div id="links-list" class="links-list hidden">
      <!-- 链接项将通过JavaScript动态添加 -->
    </div>
  </div>
  
  <div class="footer"></div>
    <button id="clear-all-btn" class="clear-all-btn" disabled>清除所有链接</button>
  </div>
  
  <!-- 提示消息 -->
  <div id="toast" class="toast"></div>
  
  <script src="popup.js"></script>
</body>
</html>